<template>
    <el-dialog :visible="visible" :title="title" z-index="1000" @close="close" width="56%" :close-on-click-modal="false">
      <el-form ref="form" :model="param" label-position="top">
        <el-col :span="24">
            <el-col :span="11">
            <el-form-item
                label="名称"
                prop="name"
                :rules="[{ required: true, message: '请输入属性名称', trigger: 'blur' },{ validator: validatePass, trigger: 'blur' }]"
                >
               <el-input v-model="param.name" placeholder="请输入属性名称" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
                <el-form-item
                label="读写属性"
                prop="canRw"
                :rules="[{ required: true, message: '请选择读写属性', trigger: 'blur' }]"
                >
                <el-select v-model="param.canRw" placeholder="请选择读写属性" clearable style="width: 100%;">
                <el-option label="只读" :value="0" />
                <el-option label="只写" :value="1" />
                <el-option label="可读可写" :value="2" />
                </el-select>
                </el-form-item>
            </el-col>
        </el-col>
        <el-col :span="24">
            <el-col :span="11">
            <el-form-item
                label="标识符"
                prop="identifier"
                :rules="[{ required: true, message: '请输入标识符', trigger: 'blur' },{ validator: validatePass, trigger: 'blur' }]"
                >
               <el-input v-model="param.identifier" placeholder="请输入标识符" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
                <el-form-item
                label="参数类型"
                prop="type"
                :rules="[{ required: true, message: '请选择参数类型', trigger: 'blur' }]"
                >
                <el-select v-model="param.type" placeholder="请选择参数类型" clearable style="width: 100%;">
                <el-option label="INT" :value="1" />
                <el-option label="STRING" :value="2" />
                <el-option label="ENUM" :value="3" />
                </el-select>
                </el-form-item>
            </el-col>
        </el-col>
       <el-col :span="24" v-if="visibleUnit">
        <el-col :span="11">
            <el-form-item
              label="单位名称"
              prop="unitName"
              :rules="[{ required: true, message: '请输入单位名称', trigger: 'blur' }]"
            >
              <el-input v-model="param.unitName" placeholder="请输入单位名称" clearable />
            </el-form-item>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="11">
          <el-form-item
            label="单位符号"
            prop="unit"
            :rules="[{ required: true, message: '请输入单位符号', trigger: 'blur' }]"
          >
            <el-input v-model="param.unit" placeholder="请输入单位符号" clearable />
          </el-form-item>
        </el-col>
      </el-col>
        <el-col :span="24" v-if="visibleUnit">
            <el-col :span="11">
            <el-form-item
                label="最大值"
                prop="max"
                :rules="[{ required: true, message: '请输入最大值', trigger: 'blur' }]"
                >
                <el-input-number v-model="param.max"  label="请输入最大值"></el-input-number>
            </el-form-item>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
            <el-form-item
                label="最小值"
                prop="min"
                :rules="[{ required: true, message: '请输入最小值', trigger: 'blur' }]"
                >
               <el-input-number v-model="param.min"  label="请输入最小值"></el-input-number>
            </el-form-item>
            </el-col>
        </el-col>
       <el-col :span="24" v-if="visibleEnum">
            <el-form-item
              label="枚举值"
              prop="enumValues"
            >
            <el-col :span="24">
                <el-tag
                :key="tag"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{tag}}
                </el-tag>
                <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
            </el-col>
            </el-form-item>
      </el-col>
      <el-col :span="24">
            <el-form-item
              label="描述"
              prop="descp"
            >
              <el-input type="textarea" resize="none" :autosize="{ minRows: 3, maxRows: 3 }" v-model="param.descp" placeholder="请输入参数描述" clearable/>
            </el-form-item>
      </el-col>
      </el-form> 
        <span slot="footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import { productService } from '@/services';
import utils from '@/utils';
export default {
    name: 'paramEdit',
    data() {
        var validatePass = (rule, value, callback) => {
            const reg =/^[_a-zA-Z0-9]+$/;
            if(value==''||value==undefined||value==null){
                callback();
            } else {
                if (!reg.test(value)){
                callback(new Error('仅由英文字母，数字以及下划线组成'));
                } else {
                callback();
                }
            }
            };

        return {
             validatePass: validatePass,
             inputVisible: false,
             inputValue: ''
        };
    },
    props:{
        operation: {
            default: 'add',
            validator: (value) => {
                return ['add', 'update'].indexOf(value) !== -1;
            },
        },
        visible: {
            type: Boolean,
            required: true,
        },
        param:{
            type: Object,
            required: true
        },
        dynamicTags:{
            type:Array
        }
    },
    computed : {
        title () {
            if(this.operation === 'add'){
               return '新增参数';
            }else {
               return '编辑参数';
            }
        },
       visibleUnit () {
           if(this.param.type!=null && this.param.type==1){
               return true;
           } else {
               return false;
           }
       },
       visibleEnum () {
           if(this.param.type!=null && this.param.type==3){
               return true;
           } else {
               return false;
           }
       }
    },
    methods : {
        close() {
            this.$emit('update:visible', false);
        },
        async confirm() {
            try {
                await this.$refs.form.validate();

                if(this.dynamicTags.length == 0 && this.param.type==3){
                    this.$message.error({'message':'请输入枚举值'});
                    return;
                }

                this.param.enum_values = JSON.stringify(this.dynamicTags);
                await productService.editParam(this.param);
                if(this.operation2==='add')
                this.$message.success({'message':'新增成功'});
                else
                this.$message.success({'message':'修改成功'});
                this.$emit('confirm');
            } catch (e) {
                console.error(e);
            }
        },
        resetForm () {
            if(this.$refs.form!=null){
                this.$refs.form.resetFields();
            }
        },
        handleClose(tag) {
          this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
            this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {

                if(this.dynamicTags.indexOf(inputValue)!=-1){
                    this.$message.error({'message':'重复添加'});
                    return;
                }

            this.dynamicTags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        }
    }
}
</script>
<style scoped>
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>